<template>
    <v-scale-screen class="screen" width="1920" height="1080" :delay="0">
        <div class="sbg">
            <h1 class="title">未来15天，天气预报</h1>
            <div class="itemE">
                <weatherEcharts ></weatherEcharts>
            </div>
        </div>
    </v-scale-screen>
</template>
<script lang="ts" setup>
import VScaleScreen from 'v-scale-screen'
import weatherEcharts from './weatherEcharts.vue'

</script>

<style lang="scss">
.screen {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
    position: relative;

    // background-color: white !important;
    .sbg {
        position: relative;
        z-index: -10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: url('/src/assets/images/sbg.png') no-repeat;
        background-size: 100% 100%;
        padding: 120px 30px 20px 30px;

        .title {
            font-size: 40px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            color: white;
            width: 100%;
            height: 100px;
            padding: 0;
            margin: 0;
            line-height: 100px;
            z-index: -1;
        }

        .itemE {
            display: grid;
            gap: 50px;
        }
    }
}
</style>